<template>
  <div class="app-container">
    <el-container>
      <el-header style="height: 150px;">
        <el-form :inline="true" style="padding-top: 20px;">
          <el-form-item label="运输任务编号:" label-width="120px">
            <el-input v-model="queryparams.transportTaskId" placeholder="请输入运输任务标号" style="width:280px" />
          </el-form-item>
          <el-form-item label="起始地机构:" label-width="100px">
            <el-select
              v-model="selectValue1"
              filterable
              placeholder="请选择起始地机构"
              style="width: 280px"
            >
              <el-option
                style="height: 100%"
                :value="selectValue1"
              >
                <el-tree
                  ref="mytree1"
                  :expand-on-click-node="false"
                  highlight-current
                  :data="deptd"
                  :props="defaultProps"
                  @node-click="btntree"
                />
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目的地机构:" label-width="100px">
            <el-select
              v-model="selectValue2"
              filterable
              placeholder="请选择目的地机构"
              style="width: 280px"
            >
              <el-option
                :value="selectValue2"
                style="height: 100%"
              >
                <el-tree
                  ref="mytree2"
                  :expand-on-click-node="false"
                  highlight-current
                  :data="deptd"
                  :props="defaultProps"
                  @node-click="btnTree"
                />
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="回车时间:" label-width="100px">
            <el-date-picker
              v-model="queryparams.intoStorageTime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-timer="['12:00:00']"
              style="width:280px"
              @change="changetime"
            />
          </el-form-item>
          <el-form-item label="车辆是否可用:" label-width="120px">
            <el-select v-model="queryparams.isAvailable" clearable placeholder="请选择" style="width:280px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-button type="danger" style="width:100px" @click="search">搜索</el-button>
          <el-button type="danger" style="width:100px" plain @click="reset">重置</el-button>
        </el-form>
      </el-header>
      <el-main>
        <el-table
          :data="list"
          stripe
          style="width: 100%"
        >
          <el-table-column
            prop="transportTaskId"
            label="运输任务编号"
            width="200"
          />
          <el-table-column
            prop="startAgencyName"
            label="起始地机构"
            width="150"
          />
          <el-table-column
            prop="endAgencyName"
            label="目的地机构"
            width="150"
          />
          <el-table-column
            prop="transportOrderNumber"
            label="运单数量"
            width="120"
          />
          <el-table-column
            prop="outStorageTime"
            label="出车时间"
            width="200"
          />
          <el-table-column
            prop="intoStorageTime"
            label="回车时间"
            width="200"
          />
          <el-table-column
            prop="licensePlate"
            label="车牌号码"
            width="120"
          />
          <el-table-column
            prop="isAvailable"
            label="车辆是否启用"
            width="120"
          >
            <template v-slot="{row}">
              <span>
                <i
                  class="dot"
                  :style="{ background: row.isAvailable ? 'green' : 'grey' }"
                />
                {{ row.isAvailable ? '可用':'停用' }}
              </span>
            </template>
          </el-table-column>>
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
          >
            <template v-slot="{row}">
              <el-button type="text" size="small" @click="$router.push({ path: '/car/info', query: {id:row.id }})">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          :current-page="queryparams.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryparams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-container>
  </div>
</template>

<script>
import { getcarReturn, carReturn, treelist } from '@/api/car'
import { transListToTreeData } from '@/utils/index'
export default {
  data() {
    return {
      deptd: [],
      defaultProps: {
        label: 'name'
      },
      list: [],
      // 存储查询参数
      queryparams: {
        page: 1,
        pageSize: 10,
        transportTaskId: '',
        startAgencyName: '',
        endAgencyName: '',
        intoStorageEndTime: '',
        intoStorageStartTime: '',
        intoStorageTime: [],
        isAvailable: ''
      },
      selectValue1: '',
      selectValue2: '',
      counts: null,
      total: 0,
      options: [
        {
          value: null,
          label: '全部'
        },
        {
          value: '1',
          label: '可用'
        },
        {
          value: '0',
          label: '不可用'
        }
      ]
    }
  },
  created() {
    this.getcarReturn()
    this.treelist()
  },
  methods: {
    async getcarReturn() {
      const res = await getcarReturn(this.queryparams)
      this.list = res.items
      this.counts = Number(res.counts)
    },
    async carReturn(id) {
      await carReturn(id)
    },
    // 分页
    handleSizeChange(pageSize) {
      this.queryparams.pageSize = pageSize
      this.getcarReturn()
    },
    handleCurrentChange(page) {
      this.queryparams.page = page
      this.getcarReturn()
    },
    changetime() {
      this.queryparams.intoStorageStartTime = this.queryparams.intoStorageTime[0]
      this.queryparams.intoStorageEndTime = this.queryparams.intoStorageTime[1]
    },
    btntree(node) {
      this.selectValue1 = node.name
      this.queryparams.startAgencyId = node.id
    },
    btnTree(node) {
      this.selectValue2 = node.name
      this.queryparams.startAgencyId = node.id
    },
    // 获取树状机构信息
    async treelist() {
      this.deptd = transListToTreeData(JSON.parse(await treelist()), '0')
    },
    // 搜索
    search() {
      this.queryparams.page = 1
      this.queryparams.pageSize = 10
      this.getcarReturn(this.queryparams)
    },
    // 重置
    reset() {
      this.queryparams = {
        page: 1,
        pageSize: 10,
        transportTaskId: '',
        startAgencyName: '',
        endAgencyName: '',
        intoStorageTime: '',
        isAvailable: ''
      }
      this.selectValue1 = ''
      this.selectValue2 = ''
      this.getcarReturn()
    }

  }
}
</script>

<style lang="scss" scoped>
.block{
  display: flex;
  justify-content: center;
}
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
  }

.el-header{
    background-color: #fff;
    color: #333;
  }

  .el-main {
    margin-top: 10px;
    background-color: #fff;
    color: #333;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
</style>
